<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">在线用户</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a th:href="@{admin}">首页</a></li>
                    <li class="breadcrumb-item active">系统管理</li>
                    <li class="breadcrumb-item active">在线用户</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
    <div class="card card-info">
        <shiro:hasPermission name="onlineUser:list">
            <form id="searchForm" class="needs-validation form-inline" novalidate="">
                <div class="form-group">
                    <label for="username">用户名:</label>
                    <input type="text" class="form-control m-2" id="username" required="">
                </div>
                <div class="form-group">
                    <label for="status">状态:</label>
                    <select id="status" class="form-control m-2" required="">
                        <option selected disabled>选择状态</option>
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary ml-3" type="submit">查询</button>
                    <button class="btn btn-default ml-2" type="reset">重置</button>
                </div>
            </form>
        </shiro:hasPermission>
    </div>
    <div class="card card-body">
        <div id="toolbar" class="btn-group">
            <shiro:hasPermission name="onlineUser:batchKickout">
                <button id="btn_batch_kickout" type="button" class="btn btn-danger">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量踢出
                </button>
            </shiro:hasPermission>
        </div>
        <table class="table-sm" id="table"></table>
    </div>
</section>

<script>

    $(function () {

        var kickoutFlag = Core.parseBool("[[${@perms.hasPerm('onlineUser:kickout')}]]");

        window.operateEvents = {
            // 点击编辑
            'click .btn_kickout': function (e, value, row, index) {
                kickoutUser(row.sessionId, row.username)
            }
        }
        var columns = [
            {checkbox: true},
            {
                field: 'sessionId',
                title: '会话id',
                align: "center"
            },
            {
                field: 'username',
                title: '用户名',
                align: "center"
            }, {
                field: 'host',
                title: '主机地址',
                align: "center"
            },
            {
                field: 'lastAccess',
                title: '最后访问时间',
                align: "center"
            }, {
                field: 'operation',
                title: '操作',
                align: "center",
                width: 200,
                events: operateEvents,
                formatter: operationFormatter
            }];

        function operationFormatter(value, row, index) {
            return kickoutFlag ? '<button class="btn btn-danger btn-sm btn_kickout">强制下线</button>' : '';
        }

        var options = {
            id: "#table",
            url: '/online/user/list',
            columns: columns,
            toolbar: '#toolbar',
            showRefresh: true,
            queryParams: queryParams
        }
        Core.initTable(options);

        function refreshTable() {
            Core.refreshTable("#table")
        }

        // 查询参数
        function queryParams(params) {
            return {
                pageNumber: params.pageNumber,
                pageSize: params.pageSize,
                username: $("#username").val()
            };
        }

        // 查询
        $('#searchForm').submit(function (event) {
            event.preventDefault();
            event.stopPropagation();
            refreshTable();
        })

        // 踢出用户
        function kickoutUser(sessionId, username) {
            Core.confirm("确定踢除该用户？", function () {
                Core.postAjax("/online/user/kickout", {"sessionId": sessionId, "username": username}, function (data) {
                    if (data.status === 200) {
                        Core.refreshTable("#table");
                    }
                    layer.msg(data.msg);
                })
            })
        }

        // 批量删除
        $("#btn_batch_kickout").on('click', function () {
            var checkedRows = Core.selectMutiData("#table");
            if (checkedRows) {
                Core.confirm("确定踢出选中的" + checkedRows.length + "条记录？", function () {
                    var sessions = [];
                    $.each(checkedRows, function (i, item) {
                        var session = {};
                        session.sessionId = item.sessionId;
                        session.username = item.username;
                        sessions.push(session);
                    })
                    var jsonStr = JSON.stringify(sessions)
                    Core.postAjax("/online/user/batch/kickout", jsonStr, function (data) {
                        if (data.status === 200) {
                            Core.refreshTable("#table");
                        }
                        layer.msg(data.msg);
                    }, function (err) {
                        layer.msg(err)
                    }, "POST", "application/json; charset=UTF-8")
                })
            }
        })

    });


</script>